import * as echarts from "echarts";
function hexToRgb(hex) {
  // 去掉可能存在的前缀 #
  hex = hex.replace(/^#/, "");

  // 如果是三位数的十六进制颜色，转换为六位数
  if (hex.length === 3) {
    hex = hex
      .split("")
      .map(function (h) {
        return h + h; // 将每个字符重复一次
      })
      .join("");
  }

  // 解析 R、G、B 值
  const bigint = parseInt(hex, 16);
  const r = (bigint >> 16) & 255; // 取出红色分量
  const g = (bigint >> 8) & 255; // 取出绿色分量
  const b = bigint & 255; // 取出蓝色分量

  return `${r}, ${g}, ${b}`; // 返回 RGB 字符串
}
function lightenColor(color, factor = 0.2) {
  // 如果是简写HEX，转为标准HEX格式
  if (color.length === 4) {
      color = '#' + Array.from(color.slice(1)).map(x => x + x).join('');
  }

  // 提取RGB值
  let r = parseInt(color.slice(1, 3), 16);
  let g = parseInt(color.slice(3, 5), 16);
  let b = parseInt(color.slice(5, 7), 16);

  // 调整亮度
  r = Math.min(255, Math.floor(r + (255 - r) * factor));
  g = Math.min(255, Math.floor(g + (255 - g) * factor));
  b = Math.min(255, Math.floor(b + (255 - b) * factor));

  // 返回新的颜色
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}
export function useEchartsMixins(id) {
  const myEchart = ref(null);
  onMounted(() => {
    myEchart.value = markRaw(echarts.init(document.getElementById(id), null, { renderer: "svg" }));
    window.addEventListener("resize", chartResize);
    window.addEventListener("fullscreenchange", chartResize);
    setTimeout(() => {
      chartResize();
    }, 500);
  });
  onUnmounted(() => {
    myEchart.value && myEchart.value.dispose();
    window.removeEventListener("resize", chartResize);
    window.removeEventListener("fullscreenchange", chartResize);
  });
  const chartResize = () => {
    myEchart.value && myEchart.value.resize();
  };
  const setOption = (option) => {
    myEchart.value &&
      myEchart.value.setOption({
        tooltip: {
          appendTo: 'body'
        },
        ...option,
      });
  };
  class publicOpition {
    static xAxis(data, options = {}) {
      return {
        type: "category",
        data,
        //颜色为白色
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0)",
          },
        },
        // label颜色为白色
        axisLabel: {
          color: "rgba(255,255,255,0.6)",
        },
        // 修改分割线颜色
        axisTick: {
          show: false, // 隐藏刻度线
        },
        ...options,
      };
    }
    static yAxis(options = {}) {
      return {
        type: "value",
        //在纵坐标 最上面加个  单位：万m²
        // name: "单位:万m²",
        scale: true,
        splitNumber: 3,
        axisLabel: {
          color: "rgba(255,255,255,0.6)",
          interval: "auto",
        },
        //颜色为白色
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.6)",
          },
        },
        // 修改分割线颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.1)", // 将颜色设置为较浅的灰色
          },
        },
        ...options,
      };
    }
    static grid(options = {}) {
      return {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
        ...options,
      };
    }
    static dataZoom = [
      {
        type: "slider",
        show: true,
        showDetail: false,
        startValue: 0,
        endValue: 4,
        filterMode: "empty",
        width: "100%",
        height: 7, // 确保滑动区域的高度合适
        left: "center",
        zoomLock: true,
        handleSize: 0, // 将手柄大小设置为0，隐藏手柄
        bottom: 0,
        borderColor: "transparent", // 去除边框颜色，隐藏多余的线
      },
      {
        type: "inside",
        zoomOnMouseWheel: false,
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
      },
    ];
    static seriesLineBar(data, options = {}) {
      let areaStyle = options.areaColor?{
        normal: {
          // 设置渐变色，从折线的默认颜色渐变到透明
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: options.areaColor }, // 使用折线的颜色
            { offset: 1, color: `rgba(${hexToRgb(options.areaColor)}, 0)` }, // 渐变到透明
          ]),
        },
      } : null;
      let itemStyle = options.barColor?{
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: options.barColor },
          { offset: 1, color:  `${lightenColor(options.barColor, 0.3)}` }
        ]),
        borderRadius: [4,4,0,0]
      } : null;
      options.barColor && console.log('hexToRgb(options.barColor)', hexToRgb(options.barColor))
      return {
        data,
        smooth: true,
        type: "line",
        // 去掉点
        // symbol: "none",
        areaStyle,
        itemStyle,
        ...options,

      };
    }
    static LineBarEchart(options = {}) {
      return {
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        grid: publicOpition.grid(),
        xAxis: publicOpition.xAxis(options.xData),
        yAxis: publicOpition.yAxis(),
        series: options.yData.map((item) => {
          return publicOpition.seriesLineBar(undefined, item)
        }),
        ...options
      }
    }
  }
  return {
    myEchart,
    setOption,
    publicOpition,
  };
}
